import AvatarUpload from '@/component/AvatarUpload';
import {
  DrawerForm,
  ProFormInstance,
  ProFormItem,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { Form, message } from 'antd';
import React, { useEffect, useRef } from 'react';

interface Props {
  open?: boolean;
  info?: any;
  close?: () => void;
}
// 新增/编辑用户
const ClientDrawer: React.FC<Props> = ({ open, close, info }) => {
  const [form] = Form.useForm<{ name: string; company: string }>();

  const formRef = useRef<ProFormInstance>();

  useEffect(() => {
    if (info) {
      setTimeout(() => {
        formRef?.current?.setFieldsValue({
          ...info,
        });
      }, 20);
    }
  }, [info]);

  return (
    <DrawerForm
      formRef={formRef}
      title={info.id ? '编辑用户' : '新建用户'}
      form={form}
      open={open}
      width={'38%'}
      onOpenChange={(visible) => {
        if (!visible) {
          close?.();
        }
      }}
      autoFocusFirstInput
      drawerProps={{
        destroyOnClose: true,
      }}
      onFinish={async (values) => {
        console.log('values', values);
        return;

        if (info.id) {
          try {
            await userUpdate({
              count: values.count,
              id: info.id,
              name: values.name,
              password: values.password,
              rule: values.rule,
            });
          } catch (error) {
            return false;
          }
        } else {
          try {
            await customerSave({
              ...values,
            });
          } catch (error) {
            // message.success('提交失败');
            return false;
          }
        }

        message.success('提交成功');
        // 不返回不会关闭弹框
        return true;
      }}
    >
      <ProFormItem label="头像" name="headImg">
        <AvatarUpload />
        {/* <img src={info.headImg} style={{ width: 100, height: 100 }} /> */}
      </ProFormItem>

      <ProFormText
        width="lg"
        name="name"
        label="账号别名"
        placeholder="请输入账号别名"
        rules={[
          {
            required: true,
          },
        ]}
      />
      <ProFormText
        width="lg"
        name="count"
        label="登录账号"
        placeholder="请输入登录账号"
        rules={[
          {
            required: true,
          },
        ]}
      />
      <ProFormText
        width="lg"
        name="password"
        label="账号密码"
        placeholder="请输入账号密码"
        rules={[
          {
            required: true,
          },
        ]}
      />

      <ProFormSelect
        width="lg"
        name="rule"
        label="账号类型"
        placeholder="请选择账号类型"
        rules={[{ required: true }]}
        options={[
          {
            label: '超级管理员',
            value: 2,
          },
          {
            label: '普通',
            value: 1,
          },
        ]}
      ></ProFormSelect>

      <ProFormTextArea
        width="lg"
        name="detail"
        label="备注"
        placeholder="请输入备注"
      />
    </DrawerForm>
  );
};

export default ClientDrawer;
